<template>
    <div id="box">
        <div id="part1">
            <div id="row1">
                <span style="display: inline-block;margin-left:75px">购买内容</span>
                <div style="display: inline-block;margin-left: 20px;">
                    <el-checkbox-group v-model="checkboxGroup" style="line-height: 55.6;padding-top: 20px;" size="medium">
                        <el-checkbox-button v-for="city in cities" :label="city" :key="city" style="padding-left: 10px;">{{city}}</el-checkbox-button>
                    </el-checkbox-group>
                </div>
            </div>
            <div id="row2">
                <span style="display: inline-block;float: left;margin-left: 52px;">取货地址</span>
                <div id='sbox' style="display: inline-block;margin-left: 28px;float: left;">
                    <el-input placeholder="请填写取获地址" clearable v-model="textarea1">
                        <el-button slot="append" icon="el-icon-map-location" @click="getDialog()"></el-button>
                    </el-input>
                    <el-dialog  :visible.sync="dialogVisible"  title="地图">
                        <AMap ref="map" />
                    <el-button @click="FaDialog()">选择该地址</el-button>
                    </el-dialog>
                </div>
            </div>
            <div id="row2">
                <span style="display: inline-block;float: left;margin-left: 52px;">备注地址</span>
                <div id='sbox' style="display: inline-block;margin-left: 28px;float: left;">
                    <el-input type="textarea" autosize placeholder="请填写具体楼号及门派号" v-model="textarea2"></el-input>
                </div>
            </div>
            <div id="row2">
                <span style="display: inline-block;float: left;margin-left: 52px;">取货电话</span>
                <div style="display: inline-block;margin-left: 28px;float: left;">
                    <el-input type="textarea" autosize placeholder="请输入取货人及号码" v-model="textarea3"></el-input>
                </div>
            </div>
        </div>
        <div id="part2">
            <div id="row3">
                <span style="display: inline-block;float: left;margin-left: 74px;">收货地址</span>
                <div id='sbox' style="display: inline-block;margin-left: 26px;float: left;">
                    <el-input type="textarea" autosize placeholder="请填写收货地址" v-model="textarea4"></el-input>
                </div>
            </div>
            <div id="row3">
                <span style="display: inline-block;float: left;margin-left: 74px;">备注地址</span>
                <div id='sbox' style="display: inline-block;margin-left: 26px;float: left;">
                    <el-input type="textarea" autosize placeholder="请填写具体楼号及门派号" v-model="textarea5"></el-input>
                </div>
            </div>
            <div id="row3">
                <span style="display: inline-block;float: left;margin-left: 74px;">收货电话</span>
                <div style="display: inline-block;margin-left: 26px;float: left;">
                    <el-input type="textarea" autosize placeholder="请输入收货人及号码" v-model="textarea6"></el-input>
                </div>
            </div>
        </div>
        <div id="part3">
            <div class="row4">
                <span style="display: inline-block;float: left;margin-left: 66px;">备注信息</span>
                <div id='kbox' style="display: inline-block;margin-left: 16px;float: left;">
                    <el-input type="textarea" style="height: 140px;" placeholder="请填写物品具体信息" v-model="textarea7" maxlength="80" show-word-limit></el-input>
                </div>
            </div>
            <div class="row5">
                <div id="fle1">
                    <div id="row3" style="margin-top:60px;">
                        <span style="display: inline-block;float: left;margin-left:18px">物品报价</span>
                         <div  style="display: inline-block;margin-left: 13px;float: left;">
                            <el-select v-model="jg" placeholder="不保价">
                                <el-option v-for="item in price" :key="item.jg" :label="item.label" :value="item.jg"></el-option>
                            </el-select>
                        </div>
                    </div>
                    <div id="row3">
                        <span style="display: inline-block;float: left;margin-left:18px">取货时间</span>
                         <div  style="display: inline-block;margin-left: 13px;float: left;">
                            <el-date-picker v-model="value2" type="datetime" placeholder="取货时间" :picker-options="pickerOptions"></el-date-picker>
                        </div>
                    </div>
                    <div id="row3">
                        <span style="display: inline-block;float: left;margin-left:18px">商品重量</span>
                         <div  style="display: inline-block;margin-left: 13px;float: left;">
                            <el-select v-model="value1" placeholder="请选择商品重量">
                                <el-option v-for="item in options" :key="item.value1" :label="item.label" :value="item.value1"></el-option>
                            </el-select>
                        </div>
                    </div>
                </div>
                <div id="fle2" style="margin-left: 28px;">
                    <span style="width:250px;height: 50px;"><h1>跑腿费</h1></span>
                    <div style="height: 70px;width: 250px;">
                        <el-input type="textarea" autosize placeholder="请输入报酬" v-model="textarea8"></el-input>
                    </div>
                </div>
            </div>
        </div>
        <div id="part4">
            <el-button type="info" @click="handleSubmit"><h1>提交</h1></el-button>
        </div>
    </div>

</template>

<script>
const cityOptions = ['其他','美食', '证件钥匙', '文件合同', '鲜花','手机','服饰首饰'];
import AMap from '../components/AMap.vue'
import axios from 'axios';
export default{
     components: {
       AMap
     }, 
    data () {
      return {
        dialogVisible: false,
        checked: true,
        checkboxGroup: ['其他'],
        cities: cityOptions,
        textarea1:'',
        textarea2:'',
        textarea3:'',
        textarea4:'',
        textarea5:'',
        textarea6:'',
        textarea7:'',
        textarea8:'',
        value1:'',
        value2:'',
        jg:'',
        price:[{
            jg:'不保价',
            label:'不保价'
        },{
            jg:'保价',
            label:'保价'
        }],
        options: [{
          value1: '100g以下',
          label: '100g以下'
        }, {
          value1: '100-500g之间',
          label: '100-500g之间'
        }, {
          value1: '500-1000g之间',
          label: '500-1000g之间'
        }, {
          value1: '1-5kg之间',
          label: '1-5kg之间'
        }, {
          value1: '5kg之上',
          label: '5kg之上'
        }],
        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
      };
    },
    computed: {
    //时间转换
    formattedDate() {
      const date = new Date(this.value2)
      return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
    }
    },
    methods:{
        getDialog(){
            this.dialogVisible=true;
        },
        FaDialog(){
            this.dialogVisible=false;
            this.textarea1=this.$refs.map.dataForm.orgAddr
            
        },
        handleSubmit() {
            const data = {
              content:this.checkboxGroup.toString(),
              address1:this.textarea1,
              address2:this.textarea2,
              address3:this.textarea4,
              address4:this.textarea5,
              tel1:this.textarea3,
              tel2:this.textarea6,
              bzxx:this.textarea7,
              price:this.jg,
              time:this.formattedDate,
              weight:this.value1,
              runprice:this.textarea8,
            }
            console.log(data)
             axios.post('http://localhost:3000/draw',data)
            .then(res=>{
                console.log(res.config.data)
            })
            .catch(error=>{
                console.log(error)
            }) 
            
    }
    },
    
}
</script>

<style>
#box{
    width: 950px;
    height: 1200px;
    margin-top: -20px;
    position: relative;
    left: 300px;
    background-color: rgba(234, 239, 187,0.3); 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2),
                0 6px 20px rgba(0, 0, 0, 0.1); 
}

#part1{
    width: 950px;
    height: 280px;
    background-color:whitesmoke;
    display: flex;
    flex-direction: column;
}
#part2{
    margin-top: 25px;
    width: 950px;
    height: 200px;
    background-color: whitesmoke;
    padding-top: 20px;
}
#part3{
    margin-top: 25px;
    width: 950px;
    height: 500px;
    background-color:whitesmoke;
    display: flex;
    padding-top: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#part4{
    width: 950px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#part4 span {
  margin-right: 10px; /* 留出一定的间距 */
}
#row1{
    float: left;
    margin-left: -2px;
}
#row2{
    margin-top: 20px;
    margin-left: 20px;
}#row3{
    width: 930px;
    height: 32.6px;
    margin-top: 20px;
}
.row4{
    margin-top: 20px;
    width: 930px;
    height: 150px;
    position: relative;
    bottom: 10px;
}
.row5{
    margin-top: -20px;
    width: 930px;
    height: 250px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
#fle1{
    height: 250px;
    width: 400px;
    
}
#fle2 {
  height: 250px;
  width: 400px;
  
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.el-button--info{
    width: 250px;
    height: 100px;
}
</style>